import React, { useEffect, useState } from 'react'

// 导出一个默认函数，返回一个React.JSX.Element
// 定义一个SettingPage函数，返回一个React.JSX.Element
function SettingPage(): React.JSX.Element {
  // 使用useEffect钩子函数，在组件挂载时执行
  const [settingJson, setSettingJson] = useState<any>({})
  useEffect(() => {
    // 监听get:homeTabs:data事件，当事件触发时执行回调函数
    window.electron.ipcRenderer.invoke('store:get', 'settings').then((res) => {
      setSettingJson(res)
    })
  }, [])

  const saveSettings = () => {
    window.electron.ipcRenderer.invoke('store:set', 'settings', settingJson)
  }
  // 返回一个div元素，内容为settingPage
  return (
    <div className={'container'}>
      <div className="w-full h-full p-[10px] flex flex-col">
        {/* 表单层 */}
        <div className="w-full flex-1 flex flex-col items-center gap-[20px]">
          {/* 保存文件地址 */}
          <FilePathInput
            label="视频地址"
            value={settingJson.videoFileSaved}
            filed="videoFileSaved"
            setValue={setSettingJson}
          />
          <FilePathInput
            label="音频地址"
            value={settingJson.audioFileSaved}
            filed="audioFileSaved"
            setValue={setSettingJson}
          />
        </div>
        <div className="w-full flex items-center justify-center">
          <button className="btn btn-wide btn-accent btn-lg" onClick={saveSettings}>
            save
          </button>
        </div>
      </div>
    </div>
  )
}

const FilePathInput = ({
  value,
  setValue,
  label,
  filed
}: {
  value: any
  setValue: React.Dispatch<React.SetStateAction<any>>
  label: string
  filed: string
}): React.JSX.Element => {
  const saveFilePath = (): void => {
    // 获取文件保存地址
    window.electron.ipcRenderer.invoke('open-folder-dialog').then((file) => {
      console.log(file)
      setValue((p) => ({ ...p, [filed]: file }))
    })
  }
  return (
    <>
      <div className="tooltip tooltip-bottom">
        <div className="tooltip-content">
          <div className="animate-bounce text-orange-400 text-2xl font-black">{value}</div>
        </div>
        {/* 最简单的 Daisy UI 文件路径输入框 */}
        <div className="form-control w-full max-w-xs">
          <label className="input w-full">
            {label}
            <input type="text" value={value} className="grow" />
            <span className="badge badge-neutral badge-md" onClick={saveFilePath}>
              选择
            </span>
          </label>
        </div>
      </div>
    </>
  )
}
export default SettingPage
